<script setup lang="ts">
import HeaderBar from './components/header-bar/header-bar.vue'
import LeftPanel from './components/left-panel/left-panel.vue'
import MainCanvas from './components/main-canvas/main-canvas.vue'
import RightPanel from './components/right-panel/right-panel.vue'
</script>

<template>
  <div class="layout">
    <HeaderBar class="layout-header-bar" />

    <MainCanvas class="layout-main-canvas" />

    <LeftPanel class="layout-left-panel" />

    <RightPanel class="layout-right-panel" />
  </div>
</template>

<style lang="less" scoped>
.layout {
  display: grid;
  grid-template-areas:
    'headerBar   headerBar   headerBar'
    'leftPanel   mainCanvas  rightPanel';
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 40px 1fr;
  min-block-size: 100vh;
}

.layout-header-bar {
  grid-area: headerBar;
}

.layout-main-canvas {
  grid-area: mainCanvas;
}

.layout-left-panel {
  grid-area: leftPanel;
}

.layout-right-panel {
  grid-area: rightPanel;
}
</style>
